<template>
    <div class="addBox">
        <span class="pageName">指挥调度 / 编辑调度</span>
        <div class="addForm">
            <el-form ref="editFormRef" :model="editForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                :size="formSize">
                <el-form-item label="任务标题" prop="title">
                    <el-input v-model="editForm.title" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="任务类型" prop="type">
                    <el-input v-show="false" v-model="editForm.type" />
                    <el-button @click="btn1" type="primary" :plain="btnSelect1">疾控核实</el-button>
                    <el-button @click="btn2" type="primary" :plain="btnSelect2">120转运</el-button>
                    <el-button @click="btn3" type="primary" :plain="btnSelect3">环境采样</el-button>
                    <el-button @click="btn4" type="primary" :plain="btnSelect4">其他</el-button>
                </el-form-item>
                <el-form-item label="任务对象" prop="object">
                    <div class="box">
                        <el-table :data="editForm.object" style="width: 70% " :show-header="false"
                            :header-cell-style="{ background: '#f9f9f9', color: '#606266', height: '80px' }">
                            <el-table-column align="left" prop="title" label="名称" />
                            <el-table-column align="center" prop="content" label="内容" />
                        </el-table>
                        <div class="label">{{ editForm.status }}</div>
                    </div>
                </el-form-item>
                <el-form-item label="负责小组" prop="group">
                    <el-button class="select" @click="selectGroup">选择</el-button>
                </el-form-item>
                <el-form-item label="转运隔离点" prop="isolation" v-show="isolation">
                    <el-input v-model="editForm.isolation" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="截止时间" prop="time">
                    <el-date-picker v-model="editForm.time" type="datetime" placeholder="请选择" format="YYYY-MM-DD HH:mm"
                        value-format="YYYY-MM-DD HH:mm" />
                </el-form-item>
                <el-form-item label="任务描述" prop="des">
                    <el-input v-model="editForm.des" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                        placeholder="请输入" />
                </el-form-item>
                <el-form-item class="formBtn">
                    <el-button @click="cancelAdd">取消</el-button>
                    <el-button type="primary" @click="submitForm(editFormRef)">确定</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <!-- 选择 -->
    <el-dialog v-model="dialogVisible" title="分配" width="20%" :before-close="handleClose">
        <el-radio-group v-model="checkList" style="display:flex;flex-direction:column;align-items: flex-start">
            <el-radio label="密接排查组" />
            <el-radio label="排查一组" />
            <el-radio label="排查二组" />
            <el-radio label="排查三组" />
            <el-radio label="排查四组" />
        </el-radio-group>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="SubmitEvent">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/util/http'
import { parseTime } from '@/util/date'
export default defineComponent({
    name: 'EditCommand',
    setup() {
        let isolation = ref(false)
        let dialogVisible = ref(false)

        const btn1 = () => {
            isolation.value = false
            state.editForm.type = '疾控核实'
            state.btnSelect1 = false
            state.btnSelect2 = true
            state.btnSelect3 = true
            state.btnSelect4 = true
        }
        const btn2 = () => {
            isolation.value = true
            state.editForm.type = '120转运'
            state.btnSelect1 = true
            state.btnSelect2 = false
            state.btnSelect3 = true
            state.btnSelect4 = true
        }
        const btn3 = () => {
            isolation.value = false
            state.editForm.type = '环境采样'
            state.btnSelect1 = true
            state.btnSelect2 = true
            state.btnSelect3 = false
            state.btnSelect4 = true
        }
        const btn4 = () => {
            isolation.value = false
            state.editForm.type = '其他'
            state.btnSelect1 = true
            state.btnSelect2 = true
            state.btnSelect3 = true
            state.btnSelect4 = false
        }
        const state = reactive({
            checkList: '',
            // 按钮
            btnSelect1: ref(true),
            btnSelect2: ref(true),
            btnSelect3: ref(true),
            btnSelect4: ref(true),
            formSize: ref('default'),
            // 表单数据
            editForm: reactive({
                title: '',
                type: '',
                object: [
                    { prop: 'name', title: '姓名', content: '' },
                    { prop: 'sex', title: '性别', content: '' },
                    { prop: 'idNum', title: '身份证号/护照号', content: '' },
                    { prop: 'number', title: '手机号', content: '' },
                    { prop: 'address', title: '现居住地', content: '' },
                    { prop: 'registrant', title: '登记人', content: '' }
                ],
                group: '',
                isolation: '',
                time: '',
                des: '',
                status: ''
            }),
        })

        const router = useRouter();
        const route = useRoute()
        // 当前id
        let id = route.query.rowId

        const editFormRef = ref<FormInstance>()
        const rules = reactive<FormRules>({
            title: [
                { required: true, message: '请输入任务标题', trigger: ['change', 'blur'] },
            ],
            type: [
                { required: true, message: '请输入任务类型', trigger: ['change', 'blur'] },
            ],
            object: [
                { required: true, message: '请选择任务对象', trigger: ['change', 'blur'] },
            ],
            group: [
                { required: true, message: '请选择负责小组', trigger: ['change', 'blur'] },
            ]

        })

        const cancelAdd = () => {
            console.log('取消');
            router.push('/zh');
            ElMessage('已取消编辑！')
        }
        // 选择小组
        const handleClose = () => {
            dialogVisible.value = false
        }
        const SubmitEvent = () => {
            dialogVisible.value = false
            state.editForm.group = state.checkList
        }

        // 选择小组
        const selectGroup = () => {
            dialogVisible.value = true
        }
        const submitForm = async (formEl: FormInstance | undefined) => {
            if (!formEl) return
            await formEl.validate((valid, fields) => {
                if (valid) {
                    console.log(state.editForm);

                    axios({
                        method: 'post',
                        url: 'command/updateTask',
                        data: {
                            taskId: id,
                            title: state.editForm.title,
                            taskType: state.editForm.type,
                            taskGroup: state.editForm.group,
                            transferPoint: state.editForm.isolation,
                            endTime: state.editForm.time,
                            taskDes: state.editForm.des
                        }
                    })
                        .then(res => {
                            if (res.data.msg == '修改成功') {
                                ElMessage({
                                    message: '编辑成功！',
                                    type: 'success',
                                })
                                router.push('/zh')
                            }
                        })

                } else {
                    console.log('编辑失败!', fields);
                }
            })
        }


        // 获取数据
        onBeforeMount(async () => {
            let rowId = route.query.rowId
            await axios({
                method: 'get',
                url: 'command/findTaskById',
                params: {
                    taskId: rowId
                }
            })
                .then(res => {
                    state.editForm.title = res.data.data[0][0].taskTitle
                    state.editForm.type = res.data.data[0][0].taskType
                    state.editForm.group = res.data.data[0][0].taskGroup
                    state.editForm.time = parseTime(res.data.data[0][0].endTime, '{y}-{m}-{d} {h}:{i}')
                    state.editForm.des = res.data.data[0][0].taskDes
                    state.editForm.isolation = res.data.data[0][0].transferPoint
                    state.editForm.status = res.data.data[1][0].taskStatus

                    let taskObject = res.data.data[1][0]

                    state.editForm.object.forEach(item => {
                        for (let key2 in taskObject) {
                            if (item.prop == key2) {
                                item.content = taskObject[key2]
                            }
                        }

                    })

                    // 判断转运类型
                    if (res.data.data[0][0].taskType == '疾控核实') {
                        state.btnSelect1 = false
                    } else if (res.data.data[0][0].taskType == '120转运') {
                        state.btnSelect2 = false
                        btn2()
                    } else if (res.data.data[0][0].taskType == '环境采样') {
                        state.btnSelect3 = false
                    } else if (res.data.data[0][0].taskType == '其他') {
                        state.btnSelect4 = false
                    }

                })
        })

        return {
            dialogVisible,
            isolation,
            btn1,
            btn2,
            btn3,
            btn4,
            // 小组
            selectGroup,
            ...toRefs(state),
            handleClose,
            editFormRef,
            SubmitEvent,
            rules,
            // 按钮
            cancelAdd,
            submitForm,

        }
    }
})
</script>

<style scoped lang="less">
.addBox {
    width: 100%;
    display: flex;
    flex-direction: column;

    .box {
        width: 410px;
        border: 1px solid rgb(225, 224, 224);
        border-radius: 5px;
    }

    //标签
    .label {
        color: #e2e0e0;
        width: 80px;
        height: 30px;
        background: #1bb0f1;
        color: white;
        position: absolute;
        top: 10px;
        right: 10px;
        text-align: center;
        border-radius: 3px;
    }

    // 页面名称
    .pageName {
        font-size: 13px;
        color: #333333;
        font-weight: 400;
    }

    // 选择
    .select {
        background: none;
        border: none;
        color: #4200ff;
        font-size: 13px;

        &:hover {
            text-decoration: underline;
        }

    }

    // 新增表单
    .addForm {
        width: 80%;
        display: flex;
        background: white;
        margin-top: 20px;
        padding: 30px;
        border-radius: 4px;

        /deep/.el-input {
            width: 410px;
            height: 40px;
            font-size: 13px;
        }



        /deep/ .formBtn {
            width: 83%;
            margin-top: 80px;

            .el-form-item__content {
                display: flex;
                justify-content: flex-end;

                // 按钮
                .el-button {
                    width: 95px;
                    height: 40px;
                    font-size: 13px;
                }
            }
        }
    }



}

.el-form-item {
    display: flex;
    align-items: center
}

/deep/ .el-form-item__label {
    font-size: 13px;
}
</style>